
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script src="shared/jquery.js" type="text/javascript"></script>
  <script src="shared/shiny.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
  <link rel="stylesheet" type="text/css" href="shared/slider/css/jquery.slider.min.css"/>
  <script src="shared/slider/js/jquery.slider.min.js"></script>
  <link rel="stylesheet" type="text/css" href="shared/bootstrap/css/bootstrap.min.css"/>
  <script src="shared/bootstrap/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="stylesheet" type="text/css" href="shared/bootstrap/css/bootstrap-responsive.min.css"/>
  <link rel="stylesheet" href="right.css"/>
                             <title>RIGHT: R Interactive Graphics via HTml</title>
  <script src="shiny-right.js"></script>
  <script src="callback.js"></script>
  <script src="kinetic-v4.6.0.js"></script>
  <script src="structure.js"></script>
  <script src="common.js"></script>
  <script src="axis.js"></script>
  <script src="color.js"></script>
  <script src="dot.js"></script>
  <script src="bar.js"></script>
  <script src="box.js"></script>
  <script src="pie.js"></script>
  <script src="line.js"></script>
  <script src="node_event.js"></script>
  <script src="menu.js"></script>
  <script src="button_event.js"></script>
  <script src="table.js"></script>
  <script src="search.js"></script>
  <script src="legend.js"></script>
</head>
<body>
<script> var mainArr1 = createMainStructure('Theoph-from-R.csv');</script>
<div id="head"> 
       <div class="wrap">
       <form id="searchForm1">
      <script>makeSearchButton(mainArr1);</script>
       <input type="text" id="searchBox" name="searchId" placeholder="Please input boolean statement..." onkeydown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {booleanSearch(searchForm1);  printAns(); return false;}};"/>
       <a id="searchBtn" href="#" class="myButton" onClick="booleanSearch(searchForm1); printAns(); return false;">Search</a>
       <a id="clearBtn" href="#" class="myButton" onClick="clearSearchBox(); return false;">Clear</a>
       <a id="showTable" href="#" class="myButton" onClick="return false;">Hide Table</a>
       <a id="saveImg" href="#" class="myButton" onClick="return false;">Save Image</a>
       </form>
       </div>
       </div>
        <script>
         	addButtonEvent();
       	</script>
       <div id="content1" class = "right-output1" >
       <div id="content" class = "right-output" >
<div id="container1" oncontextmenu="return false;"></div>
<div id="container2" oncontextmenu="return false;"></div>
<div id="container3" oncontextmenu="return false;"></div>
<div id="container4" oncontextmenu="return false;"></div>
<div id="container5" oncontextmenu="return false;"></div>
<div id="container6" oncontextmenu="return false;"></div>

       </div>
       </div>
       
       <script>

       var lobj1 = new MakeLineObj(mainArr1, 'Time', 'conc');
       var axis1 = new Axis(1, lobj1, 'Time', 'conc', {});
       var l1 = new Line(axis1, lobj1, 'x1', 'x2', 'y1', 'y2', {});
       
       

       var axis2 = new Axis(2, mainArr1, 'Time', 'conc', {});
       var d1 = new Dot(axis2, mainArr1, 'Time', 'conc', {});
       
       var histObj1 = new ddply(mainArr1, ['conc'], {});
       var axis3 = new Axis(3, histObj1, 'conc', 'frequency', {legend: 'conc'});
       var hist1 = new Bar(axis3, histObj1, 'conc', 'frequency', {});
     

       eventTrigger([axis1, axis2, axis3]);
     //  var axisSaving1 = new axisSaving([axis1, axis2, axis3]);
       </script>
        <script>
        
        var runOffload = {};
        (function() {
        	runOffload = function (dataObj) {
        		this.dataObj = dataObj;
        	};
        	runOffload.prototype = {
        		_send: function(){
        			window.Shiny.onInputChange("hidden", this.dataObj.$isHidden);
        		},
        		_run: function(dataObj){
        			// customized code in here.
        			var tt = new MakeLineObj(dataObj, 'x', 'y');
        			var tt2 = new Line(axis2, tt, 'x1', 'x2', 'y1', 'y2', {baseColor:'blue' , event:'false'});
        		}
        	};
        })();
        offload = new runOffload(mainArr1);
        $(function() {
            setTimeout(function() {
            window.Shiny.onInputChange('first', 1);
            }, 1)
          });
        </script>
       <div id="footer">
       <p id="copyright">&copy; 2013 - <a href="#">The RIGHT team</a></p>
       <p id="dont-delete-this">E-mail : <a href="mailto:teamrightjs@gmail.com">team.right.js@gmail.com</a></p>
       </div>
       
</body>
</html>